<template>
  <div>
    <a-modal
      title="分组管理"
      :visible="visible"
      @ok="handleOk"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
      width="770px">
      <div style="max-height: 500px;overflow-x: auto;">
        <a-list
          class="demo-loadmore-list"
          item-layout="horizontal"
          :data-source="groups"
        >
          <a-list-item slot="renderItem" slot-scope="item,index">
            <a v-if="item.isSysGroup!==1" slot="actions" @click="rename(item,index)"><a-icon type="edit" />重命名</a>
            <a v-if="item.isSysGroup!==1" slot="actions"><a-icon type="delete" />
              <a-popconfirm title="确定删除？" ok-text="Yes" cancel-text="No" @confirm="deleteGroup(item.id)">
                <a href="#">删除</a>
              </a-popconfirm>
            </a>
            <a-list-item-meta>
              <a-input slot="title" @blur="submit(item)" v-model="item.name" style="width: 340px;display: none;" :class="activeClass ==index?'selectBtn':''" />
              <a :class="activeClass ==index?'selectNoBtn':''" slot="title">{{ item.name }}({{ item.fileCount }})</a>
            </a-list-item-meta>
            <div>{{ item.isSysGroup ===1 ? '系统分组':'' }}</div>
          </a-list-item>
        </a-list>
      </div>
    </a-modal>
  </div>
</template>
<script>
  import {
    deleteGroup, listGroup, renameGroup
  } from '@/api/site/upFile'
  export default {
    data () {
      return {
        visible: false,
        confirmLoading: false,
        groups: [],
        activeClass: -1,
        showEdit: false
      }
    },
    methods: {
      show () {
        this.queryGroup()
        this.visible = true
      },
      queryGroup () {
        listGroup({}).then(response => {
          this.groups = response.res
        })
      },
      handleOk (e) {
         this.handleCancel()
      },
      rename (item, index) {
         this.activeClass = index
      },
      submit (item) {
        renameGroup(item).then(response => {
         if (response.code === 0) {
            this.activeClass = -1
            this.queryGroup()
            this.$emit('ok')
         } else {
           this.$message.error(response.msg)
         }
        })
      },
      deleteGroup (id) {
        deleteGroup({ id: id }).then(response => {
           if (response.code === 0) {
            this.$emit('ok')
            this.queryGroup()
            this.$message.info(response.msg)
           } else {
             this.$message.error(response.msg)
           }
        })
      },
      handleCancel (e) {
        this.activeClass = -1
        this.visible = false
      },
      onChange (e) {

      }
    }
  }
</script>
<style>
  .selectBtn{
     display:block!important
  }
  .selectNoBtn{
     display:none!important
  }
</style>
